<template>
	<view>
		<w-picker  mode="region" :defaultVal="[15,0]"  @confirm="onConfirmcity"  ref="region"  themeColor="#E02E24" ></w-picker>

		<view class="uni-padding-wrap">
			<form @submit="formSubmit" >
				<view class="cu-form-group">
					<view class="title">持卡人姓名</view>
					<input placeholder="请输入持卡人姓名" name="custName"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">手机号</view>
					<input placeholder="请输入银行预留手机号" name="phoneNo"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">身份证号</view>
					<input placeholder="请输入持卡人身份证号" name="idNo"></input>
				</view>
				
				<view class="cu-form-group">
					<view class="title">银行卡卡号</view>
					<input placeholder="请输入银行卡号" name="cardNo" v-model="inputCode"  @blur="lost()"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">银行名称</view>
					<input placeholder="请输入银行名称" name="bandCode1"  disabled="true" v-model="name" @blur="lost1()" @click="navToBankCode"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">开户行城市</view>
					<input placeholder="请选择开户行城市" name="input" :value="cityValue==''?'请选择开户行城市':cityValue" @tap="showcity"></input>
					<text class="yticon icon-you un-icon"></text>
				</view>
				<view class="cu-form-group">
					<view class="title">开户行</view>
					<input placeholder="请填写开户行" name="bankSite" v-model="bankSite"></input>
				</view>
				
				<input v-show="false" name="bankNoId" v-model="bankNoId"></input>
				
				<view class="cu-form-group" v-show="false">
					<view class="title">卡片类型</view>
					<radio-group class="uni-flex" name="cardType">
						<label>
							<radio :checked="isCheck==1"  value="1" color="#E02E24" style="transform:scale(0.8)" />储蓄卡</label>
						<label style="margin-left: 101upx;">
							<radio :checked="isCheck==0"  value="2" color="#E02E24" style="transform:scale(0.8)"/>信用卡</label>
					</radio-group>
				</view>
				<view v-show="false" class="cu-form-group">
					<view class="title">是否默认</view>
					<radio-group class="uni-flex1" name="isDefault">
						<label>
							<radio :checked="isDefault==1" value="1" color="#E02E24" style="transform:scale(0.8)" />是</label>
						<label style="margin-left: 155upx;">
							<radio :checked="isDefault==0" value="0" color="#E02E24" style="transform:scale(0.8)"/>否</label>
					</radio-group>
				</view>
				
				<!-- 验证码 -->
				<!-- <uni-popup :show="type === 'middle-img'" position="middle" mode="insert"  @hidePopup="togglePopup('')">
					<view class="un-center-box">
						<view class="un-ling">请输入验证码</view>
						<validcode :maxlength="6" :isPwd="false" @finish="getCode"></validcode>
						<text class="badge yticon icon-fork " @click="togglePopup('')"></text>
					</view>
				</uni-popup> -->
				
				<view class="uni-btn-v uni-common-mt">
					<button class="btn-submit" formType="submit" type="primary">下一步</button>
				</view>
				
			</form>
		</view>
	</view>
</template>

<script>
	
	//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	var  graceChecker = require("../../../common/graceChecker.js");
	// var  BIN  = require("../../../common/index.js");
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components:{
				uniPopup,
				wPicker
		},
		data() {
			return {
				type: '',//验证码弹框插件类型
				
				isDefault:1,//是否默认
				isCheck: 1,//卡片类型
				
				mode:'',//城市选择插件类型
				name:'',//银行名称
				inputCode: '',//银行卡卡号
				bankCode:'',//银行名称
				
				custName: '',//持卡人姓名
				phoneNo: '',//手机号
				cardNo: '',//卡号
				cardType:'',//卡片类型
				idNo:'',//省份证号
				cityValue:'',//页面显示城市
				bankSite:'',//开户行
				bankNoId:0,//银行名表ID
				province:'',//开户行省份
				city:'',//开户行城市

				
			}
		},
		onLoad() {
			
			this.$http.post("/user/queryCard",{
				SIGNATURE : uni.getStorageSync("SIGNATURE"),
				TOKEN: uni.getStorageSync('userInfo').TOKEN,
			}).then((e)=>{
				
				let list = e.data.OBJECT;
				if(list !== "" ){
					uni.showToast({
						title:"已有绑定银行卡",
						icon:"none"
					})
					uni.redirectTo({
						url:'/pages/bankcard/bandcard'
					})
				}
			}).catch((err)=>{
				console.log("请求超时",err);
			})
			
			
			uni.$on('login', e => {
				this.name=e.BANKNAME;
				this.bankNoId=e.ID;
			});
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		methods: {

			// async lost(){
			// 	if(this.inputCode !== ''){
			// 		BIN.getBankBin(this.inputCode)
			// 		.then((e)=>{
			// 			console.log(e);
			// 			this.name = e.bankName;
			// 			this.bankCode = e.bankCode;
			// 			this.isCheck = e.cardTypeName === '储蓄卡'? 1 : 0;
			// 		}).catch((err)=>{
			// 			console.log("hehe",e);
			// 		})
			// 	}
			// },
			
			// async lost1(){
			// 	if(this.name !== ''){
			// 		//查询是否支持该银行
			// 		this.$http.post("/user/queryBank",{
			// 			SIGNATURE : uni.getStorageSync('SIGNATURE'),
			// 			TOKEN: uni.getStorageSync('userInfo').TOKEN,
			// 			BANKNAME:this.name,
			// 		}).then((e)=>{
			// 			this.bankNoId=e.data.OBJECT.ID;
			// 		if(!this.bankNoId){
			// 			uni.showToast({
			// 				title:"暂时不支持该银行",
			// 				icon:"none",
			// 			})
			// 		}
			// 		}).catch((err)=>{
			// 			console.log("支持银行查询出错",e);
			// 		})
			// 		
			// 	}
			// },
				
			formSubmit: function (e) {
				//将下列代码加入到对应的检查位置
				//定义表单规则
				var rule = [
					{name:"custName", checkType : "notnull", checkRule:"",  errorMsg:"请输入持卡人姓名"},
					{name:"phoneNo", checkType : "phoneno", checkRule:"",  errorMsg:"请输入正确的手机号"},
					{name:"idNo", checkType : "string", checkRule:"18,18",  errorMsg:"请输入正确的身份证号"},
					{name:"cardNo", checkType : "int", checkRule:"15,18",  errorMsg:"请输入正确的银行卡号"},
					{name:"cardType", checkType : "same", checkRule:"1",  errorMsg:"目前只支持储蓄卡"},
					// {name:"isDefault", checkType : "notnull", checkRule:"",  errorMsg:"请选择是否默认"},
					{name:"bankSite", checkType : "notnull", checkRule:"",  errorMsg:"请输入开户行"},
					{name:"bankNoId", checkType : "notsame", checkRule:0,  errorMsg:"暂不支持该银行"},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					console.log("**",formData);
					this.custName= formData.custName;
					this.phoneNo= formData.phoneNo;
					this.cardNo= formData.cardNo;
					this.cardType=formData.cardType;
					this.idNo=formData.idNo;
					this.isDefault = formData.isDefault;
					this.bankNoId=formData.bankNoId;
					this.bankSite=formData.bankSite;
					//查询是否签约
					// this.$http.post("/user/queryCardCon",{
					// 	SIGNATURE : uni.getStorageSync('SIGNATURE'),
					// 	TOKEN: uni.getStorageSync('userInfo').TOKEN,
					// 	custName: formData.custName,
					// 	phoneNo: formData.phoneNo,
					// 	cardNo: formData.cardNo,
					// 	idNo:formData.idNo,
					// 	bankNoId:formData.bankNoId,
					// 	bankSite:formData.bankSite,
					// }).then((e)=>{
					// 	console.log("11",e);
					// 	if (e.statusCode === 200 && e.data.STATE === '0') {  
					// 		//如果已签约
					// 		if(e.data.OBJECT.respCode == "00"){
								//走直接添加卡片请求
								this.$http.post("/user/addCard",{
									SIGNATURE : uni.getStorageSync('SIGNATURE'),
									TOKEN: uni.getStorageSync('userInfo').TOKEN,
									custName: formData.custName,
									phoneNo: formData.phoneNo,
									cardNo: formData.cardNo,
									idNo:formData.idNo,
									bankCode: this.name,
									cardType:formData.cardType,
									isDefault:formData.isDefault,
									bankNoId:formData.bankNoId,
									bankSite:formData.bankSite,
									city:this.city,
									province:this.province,
								}).then((e)=>{
									console.log("11",e);
									if(e.data.STATE == '903'||e.data.STATE == '904'){
										// #ifdef MP-WEIXIN
										uni.showModal({
											content:'请先登录',
											success: function (res) {
											        if (res.confirm) {
											            uni.switchTab({
											            	url:"/pages/user/user"
											            })
											        } else if (res.cancel) {
											            console.log('用户点击取消');
											        }
											    }
										})
										// #endif
										// #ifndef MP-WEIXIN
										uni.navigateTo({
											url: "/pages/public/login1"
										})
										// #endif
									}
									if (e.statusCode === 200 && e.data.STATE === '0') {  
										/* uni.redirectTo({
											url: "/pages/bankcard/bankcard"
										}) */
										uni.navigateBack({
											
										})
									}else{
										uni.showToast({title:e.data.MSG, icon:"none"});
									}
								}).catch((err)=>{
									
									console.log("添加失败",err)
								})
					// 		}else if(e.data.OBJECT.respCode == "02" || e.data.OBJECT.respCode == "01" ||e.data.OBJECT.respCode == "03"){
					// 			//如果未签约 走认证
					// 			this.$http.post("/user/addPayCardMsg",{
					// 				SIGNATURE : uni.getStorageSync('SIGNATURE'),
					// 				TOKEN: uni.getStorageSync('userInfo').TOKEN,
					// 				custName: formData.custName,
					// 				phoneNo: formData.phoneNo,
					// 				cardNo: formData.cardNo,
					// 				bankCode: this.name,
					// 				cardType:formData.cardType,
					// 				idNo:formData.idNo,
					// 				isDefault: formData.isDefault,
					// 				bankNoId:formData.bankNoId,
					// 				bankSite:formData.bankSite,
					// 			}).then((e)=>{
					// 				console.log("1122",e);
					// 				if (e.statusCode === 200 && e.data.STATE === '0') {  
					// 					this.togglePopup('middle-img');
					// 				}
					// 			}).catch((err)=>{
					// 				console.log("认证失败",err)
					// 			})
					// 		}
					// 	}
					// }).catch((err)=>{
					// 	console.log("请求失败",err)
					// })
					
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
			//展示城市选择
			showcity(){
				this.mode='region';
				this.$refs[this.mode].show();
			},
			//选择城市
			onConfirmcity(val){
				this.cityValue=val.result;
				this.province=val.checkArr[0];
				this.city=val.checkArr[1];
			},
			//展示银行名称
			// showbank(){
			// 	this.mode='selector';
			// 	this.$refs[this.mode].show();
			// },
			//选择银行
			// onConfirmBank(val){
			// 	this.bankValue=val.result;
			// 	this.bandCode=val.checkArr.value;
			// },
			//索引列表选择银行
			navToBankCode(){
				uni.navigateTo({
					url:'/pages/bankcard/addbankcard/bankcode/bankcode'
				})
			},
			// //弹框
			// togglePopup(type) {
			// 		this.type = type;
			// },
			// //获取验证码
			// getCode(val) {
			// 	this.togglePopup('');
			// 	uni.showLoading({
			// 		title: '请稍候...'
			// 	});
			// 	let SIGNATURE = uni.getStorageSync('SIGNATURE');
			// 	this.$http.post("/user/addPayCard",{
			// 		SIGNATURE : uni.getStorageSync('SIGNATURE'),
			// 		TOKEN: uni.getStorageSync('userInfo').TOKEN,
			// 		custName: this.custName,
			// 		phoneNo: this.phoneNo,
			// 		cardNo: this.cardNo,
			// 		bankCode: this.name,
			// 		cardType:this.cardType,
			// 		authMsg: val,
			// 		idNo:this.idNo,
			// 		isDefault: this.isDefault,
			// 		bankNoId:this.bankNoId,
			// 		bankSite:this.bankSite,
			// 	}).then((e)=>{
			// 		uni.hideLoading();
			// 		this.togglePopup('');
			// 		if((e.statusCode === 200) && (e.data.STATE === '0')){
			// 		/* 	uni.redirectTo({
			// 				url: "/pages/bankcard/bankcard"
			// 			}) */
			// 			uni.navigateBack({
			// 				
			// 			})
			// 		}else{
			// 			uni.showToast({
			// 				title: e.data.MSG,
			// 				icon: "none",
			// 			})
			// 			this.togglePopup('middle-img');
			// 		}
			// 	})
			// 	.catch((err)=>{
			// 		console.log('request fail', err);
			// 		
			// 	})
			// },
			// 
		}
	}
</script>

<style lang="scss">
	page {
			background: #f5f5f5;
	}
	.btn-submit{
		background-color: #E02E24;
		margin: 20upx 60upx;
	}
	.cu-form-group {
		background-color: #ffffff;
		padding: 1upx 50upx;
		display: flex;
		align-items: center;
		min-height: 83upx;
		justify-content: space-between;
		position: relative;
	}
	.cu-form-group+.cu-form-group {
		border-top: 1upx solid #eee;
	}
	.cu-form-group .title {
		text-align: justify;
		font-size: 28upx;
		position: relative;
		height: 60upx;
		line-height: 60upx;
		min-width: calc(4em + 15px);
	}
	input{
		width: 450upx;
		font-size: 28upx;
		color: #999999;
	}
	.un-icon{
		position: absolute;
		z-index: 1;
		left:650upx;
		color: #999999;
	}
	.uni-flex {
		display: flex;
		flex-direction: row;
		margin-right: 100upx;
		font-size: 28upx;
	}
	.uni-flex1{
		display: flex;
		flex-direction: row;
		margin-right: 150upx;
		font-size: 28upx;
	}
	
	.un-center-box{
		background-color: #fff;
		border: 2upx solid #9D9D9D;
		border-radius: 5%;
		width:600upx;
		height: 300upx;
		margin:0 30upx;
		text-align: center;
		.un-ling{
			background-color: #E02E24;
			width: 100%;
			height: 123upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 123upx;
			font-size: 38upx;
			font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
			font-weight: 700;
			font-style: normal;
			margin-bottom: 20upx;
		}
		.badge{
			position:absolute;
			top:50upx;
			right:50upx;
			color: #FFFFFF;
			display:flex;
			font-size: 38upx;
		}
	}
	
</style>
